/**
 * webpack打包配置
 */
const path = require("path") // node内置path模块处理路径
const glob = require("glob") // node内置glob模块 解析路径

/* 插件 */
const HtmlWebpackPlugin = require("html-webpack-plugin") // 打包html插件
const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin // 清除dist目录插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 提取css插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css插件

/* 自动加载所有页面JS作为入口 */
const entry = {};
const scripts = glob.sync("./src/pages/*/*.js");

scripts.forEach(function (dir) {//./src/pages/ad/ad.js
  let chunkName = path.basename(dir, '.js')//去掉js后缀     ad.js===>ad
  
  entry[chunkName] = dir//  

  // entry['ad']='./src/pages/ad/ad.js'
})

/* 自动打包页面 */
const htmls = glob.sync("./src/pages/*/*.html")
const pages = htmls.map(function (html) {// html ===>"./src/pages/ad/ad.html"
  let name = path.basename(html)//'ad.html'
  return new HtmlWebpackPlugin({
    template: html,
    filename: name,
    chunks: [name.replace('.html','')]//当前页面所需要的模块
  })
})


/* 打包配置 */
module.exports = {
  // 入口
  entry: entry,

  // 出口
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
    publicPath: "./",
  },

  // 加载器---作用: 把非js文件转换成js相关文件
  module: {
    // 加载器处理规则
    rules: [
      // 打包css
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },

      // 打包less
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
          "less-loader",
        ],
      },

      // 打包css背景图
      {
        test: /\.(png|jpg|gif|jpeg|webp)$/,
        loader: "url-loader",
        options: {
          limit: 10 * 1024, // 限制大小 10kb
          name: "[hash:16].[ext]", // 控制名字长度
          esModule: false, // 关闭es6模块化
          outputPath: "imgs", // 输出目录
        },
      },

      // 打包html中的图片
      {
        test: /\.html$/,
        loader: "html-loader",
      },

      // 打包字体图标
      {
        test: /\.(woff|ttf|woff2|svg|eot)$/,
        loader: "file-loader",
        options: {
          name: "[hash:16].[ext]",
          outputPath: "fonts",
        },
      },
    ],
  },

  // 模式
  mode: process.env.NODE_ENV,

  // 插件
  plugins: [
    // 删除dist
    new CleanWebpackPlugin(),
    // 提取css插件
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    // 压缩css插件
    new OptimizeCssAssetsWebpackPlugin()

  ].concat(pages),

  // 开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
    compress: true, // 启动gzip
    port: 8080, // 端口
    open: true, // 自动打开服务
    publicPath: "/", // 静态资源查找路径
    openPage: "login.html", // 打开的页面
  },

  target: "web", // 目标是浏览器
}


